<template>
	<view class="pb100">
		<!-- 顶部占位区域 -->
	<view class="topbg">
		<view class="header-bar"></view>
	</view>
		<!-- //顶部占位区域 -->

		<!-- 轮播图区域 -->
		<view class="wrap swiper mt">
			<u-swiper :list="swiperList" height="660" @click="btnImg"></u-swiper>
			<u-icon name="arrow-left" size="34" color='#333' class="backIcon" @click="gotoback"></u-icon>
		</view>
		<!-- //轮播图区域 -->

		<!-- 商品描述区域 -->
		<view class="pl30 pr30 mt30">
			<!-- 商品简介区域 -->
			<view class="goodsintroduce radius16">
				<!-- 上 -->
				<view class="flex row-between col-center fs24">
					<text class="fs36 color-red fw">¥{{goodDetail.data.price}}</text>
					<view class="">
						<text class="color9">已售 {{goodDetail.data.virtual_sales+goodDetail.data.sales}}件 / </text>
						<text class="color-red mr10">剩余 {{stock}}</text>
					</view>
				</view>
				<!-- 中 -->
				<view class="fs32 color3 fw mt20">{{goodDetail.data.name}}</view>
				<!-- 下 -->
				<view class="color9 fs24 mt20">{{goodDetail.data.goods_brief}}</view>
			</view>
			<!-- //商品简介区域 -->

			<!-- 购买规格区域 -->
			<view class="bg-f mt20 pr30 pb30 pt30 fs22">
				<!-- 上 -->
				<view class="flex row-between" v-if="goodDetail.data.speceAll">
					<view class="flex1 flex row-right mr30">选择</view>
					<view class="typebox flex row-between" @click="openPop">
						<view class="">
							<block v-for="(item,i) in goodDetail.data.speceAll" :key='i'>
								<block v-for="(item2,i2) in item.spece_value" :key='i2'>
									{{item.is_id==item2.id?item2.title:''}}
								</block>
							</block>
						</view>
						<u-icon name="more-dot-fill"></u-icon>
					</view>
				</view>
				<!-- 下 -->
				<view class="flex mt30">
					<view class="flex1 flex row-right mr30">购买须知</view>
					<view class="typebox">
						<text>{{goodDetail.data.instructions}}</text>
					</view>
				</view>
			</view>
			<!-- //购买规格区域 -->

			<!-- 店铺盒子 -->
			<view class="pr30 pb30 pt30 pl30 radius16 bg-f mt20 flex">
				<image :src="goodDetail.shop.logo.url" class="w100 h100 radius10 mr30"></image>
				<view class="flex row-between flex1 col-center">
					<view class="flex row-column row-between h100">
						<text>{{goodDetail.shop.name}}店铺</text>
						<text>共{{goodDetail.shop.goods_num ||0}}件商品</text>
					</view>
					<view class="w140 h48 radius24 color-red goshop"
						@click="$jump('/subpkg/brandDetail/brandDetail?shop_id='+goodDetail.shop.id)">
						进入店铺
					</view>
				</view>
			</view>
			<!-- //店铺盒子 -->

			<!-- 商品详情区域 -->
			<view class="pr30 pb30 pt30 pl30 bg-f mt20">
				<view class="color3 fs26 fw tit mb20">商品详情</view>
				<u-parse :html="goodDetail.data.detail"></u-parse>
			</view>
			<!-- //商品详情区域 -->
		</view>
		<!-- //商品描述区域 -->

		<!-- 底部购物车区域 -->
		<view class="footerbuy flex row-around col-center pt20">
			<view class="flex row-column col-center" @click="gotoServe">
				<u-icon name="chat" color="#666666" size="40"></u-icon>
				<text class="color6 fs28">客服</text>
			</view>
			<view class="flex row-column col-center" @click="collectionGoods">
				<u-icon name="heart-fill" color="#D23030" size="40" v-if="collectiongoods"></u-icon>
				<u-icon name="heart" color="#666666" size="40" v-else></u-icon>
				<text class="color6 fs28">收藏</text>
			</view>
			<view class="flex">
				<view class="w230 h70 cartbox" @click="setcart">
					加入购物车
				</view>
				<view class="w230 h70 buyBtnBox" @click="buyBtn">
					立即购买
				</view>
			</view>
		</view>
		<!-- //底部购物车区域 -->

		<!-- 弹层区域 -->
		<u-popup v-model="show" mode='bottom' border-radius=20 :custom-style='customStyle'
			:mask-custom-style='maskCustomStyle' closeable>
			<!-- 大盒子 -->
			<view class="ml40 mt30 mr30 pr20">
				<!-- 上面商品信息区域 -->
				<view class="flex">
					<!-- 左边的图片 -->
					<image :src="goodsthumb" class="w160 h160 radius8" v-if="!goodsthumb==''||goodsthumb"></image>
					<image v-else-if="goodDetail.data.img" :src="goodDetail.data.img.url" class="w160 h160 radius8" ></image>
					<!-- 右边的商品信息 -->
					<view class="flex1 flex row-column row-between ml30">
						<view class="fs32 color3 fw">{{goodDetail.data.name}}</view>
						<view class="fs24 color9">已选：
							<block v-for="(item,index) in goodDetail.data.speceAll" :key="index">
								<block v-for="(item2,i2) in item.spece_value" :key='i2'>
									{{item.is_id==item2.id?item2.title:''}}
								</block>
							</block>
						</view>
						<view class="fs36 color-red">¥{{goodDetail.data.price}}</view>
					</view>
				</view>
				<!-- 中间的规格 -->
				<view class="mt50">
					<view class="mb30" v-for="(item,i) in goodDetail.data.speceAll" :key='i'>
						<view class="">{{item.title}}</view>
						<view class="flex flex-wrap">
							<view class="" v-for="(item2,i2) in item.spece_value" :key='i2'>
								<!--  -->
								<view :class="['popupTypebox','mr10 mt20',item.is_id==item2.id?'selepopupTypebox':'']"
									@click="changehandle(item,item2)">{{item2.title}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 下面的数量 -->
				<view class="flex row-between col-center mt40 mb60">
					<text>数量</text>
					<u-number-box v-model="value" @change="valChange" :min="1"></u-number-box>
				</view>
			</view>
		</u-popup>
		<!-- //弹层区域 -->
	</view>
</template>

<script>
	export default {
		name: 'goodsdetail',
		onLoad(opt) {
			console.log(opt)
			this.spu = opt.spu
			this.query.spu = opt.spu
			// this.query.spu=opt.spu
			this.getGoodsDetail()
		},
		data() {
			return {
				//收藏商品标示
				collectiongoods: false,
				//库存
				stock: '',
				//选择商品数量默认为1
				num: 1,
				//商品单价
				goodsOnePrice: '',
				//商品图片
				goodsthumb: '',
				//商品id
				spu: '',
				query: {
					spu: '',
					specValue: []
				},
				//添加购物车所需要的参数
				queryCart: {
					sku: '',
					num: 1,
					price: ''
				},
				//商品详情
				goodDetail: {
					data: {},
					shop: {
						logo: ''
					}
				},
				//轮播图
				swiperList: [],
				//弹层显示
				show: false,
				//步进器
				value: 1,
				// 弹层样式
				customStyle: {
					marginBottom: '120rpx',
				},
				//遮罩层样式
				maskCustomStyle: {
					marginBottom: '120rpx',
				},
				//立即购买的参数
				buyquery: {
					goods_item_id: '',
					note: '',
					num: 1,
					shop_id: ''
				}
			};
		},
		methods: {
			//获取商品详情
			getGoodsDetail() {
				this.$api.goodsDetail({
					spu: this.spu
				}).then(res => {
					console.log(res)
					//正则替换取消富文本图片之间的间隙
					res.data.data.detail=res.data.data.detail.replace(/<img /g,'<img style="display:block;"')
					//规格默认被选中
					if (res.data.data.speceAll) {
						res.data.data.speceAll.forEach(item => {
							item.is_id = ''
							if (item.spece_value.length) {
								item.is_id = item.spece_value[0].id
							}
						})
						if(res.data.data.skuInfo.active==1) {
							this.queryCart.sku = res.data.data.skuInfo.sku
							this.buyquery.goods_item_id = res.data.data.skuInfo.id
							this.buyquery.shop_id = res.data.data.skuInfo.shop_id
						}else {
							// this.$msg('该规格已下架')
							this.buyquery={}
							this.queryCart={}
						}
							
					} else {
						if(res.data.data.skuInfo.active==1) {
							//没有规格直接赋值
							this.queryCart.sku = res.data.data.sku
							//没有规格直接赋值
							this.buyquery.goods_item_id = res.data.data.skuInfo.id
						}
					}
					//轮播图格式转换
					res.data.data.imgs.forEach(item => {
						let obj = {}
						obj.image = item.url
						this.swiperList.push(obj)
					})
					//赋值单价
					this.goodsOnePrice = res.data.data.price
					//赋值头像
					this.queryCart.price = res.data.data.price
					//赋值商品详情
					this.goodDetail = res.data
					//赋值库存
					this.stock = this.goodDetail.data.stock
					//赋值是否收藏
					if (res.data.data.collection == 0) {
						// 0是未收藏
						this.collectiongoods = false
					} else {
						// 1是收藏
						this.collectiongoods = true
					}
				})
			},
			//打开弹层
			openPop() {
				this.show = true
				this.changehandle()
			},
			//步进器
			valChange(e) {
				//存入商品购买数量
				this.num = e.value
				this.queryCart.num = e.value
				this.buyquery.num = e.value
				console.log('333', this.goodsOnePrice * this.num)
				this.goodDetail.data.price = (this.goodsOnePrice * this.num).toFixed(2)

			},
			//选择规格  获取事实的库存和价格
			changehandle(item, item2) {
				if (item2) {
					item.is_id = item2.id
				}
				this.query.specValue = this.goodDetail.data.speceAll.map(item => {
					return item.is_id
				})
				this.$api.getSkuBySpece(this.query).then(res => {
					console.log('33', res)
					if (res.data.data.skuInfo && res.data.data.skuInfo.active==1) {
						this.goodDetail.data.price = (res.data.data.skuInfo.price * this.num).toFixed(2)
						//赋值单价
						this.goodsOnePrice = res.data.data.skuInfo.price
						//赋值商品图片
						this.goodsthumb = res.data.data.skuInfo.thumb
						//赋值销量
						this.goodDetail.data.stock = res.data.data.skuInfo.stock - this.num
						this.queryCart.sku = res.data.data.skuInfo.sku
						this.queryCart.price = res.data.data.skuInfo.price
						this.buyquery.goods_item_id = res.data.data.skuInfo.id
					} else {
						this.$msg('该规格已下架')
						this.buyquery={}
						this.queryCart={}
					}
				})
			},
			//加入购物车
			setcart() {
				if (!this.show) {
					this.show = true
				} else {
					if (this.queryCart.sku) {
						this.queryCart.type=1
						this.$api.addCart(this.queryCart).then(res => {
							this.$msg(res.msg)
						})
					}else {
						this.$msg('该规格已下架')
					}
				}

			},
			//点击立即购买
			buyBtn() {
				if (!this.show) {
					this.show = true
				} else {
					console.log('333',this.buyquery)
					if(!this.buyquery.goods_item_id) {
						this.$msg('该规格已下架')
						return
					}
					let sku_details = []
					sku_details.push(this.buyquery)
					this.$api.confirm_order_page({
						sku_details
					}).then(res => {
						this.$msg('订单发送成功')
						this.show = false
						uni.setStorageSync('selectList', res.data)
						setTimeout(() => {
							uni.navigateTo({
								url: '/subpkg/submitOrder/submitOrder'
							})
						}, 1000)
					})
				}
			},
			//商品收藏
			collectionGoods() {
				this.$api.goodcollection({
					id: this.spu
				}).then(res => {
					console.log(res)
					this.collectiongoods = !this.collectiongoods
					if (this.collectiongoods) {
						this.$msg('收藏成功')
					} else {
						this.$msg('取消收藏成功')
					}
				})
			},
			//前往客服
			gotoServe() {
				let that = this
				if(this.goodDetail.shop.url) {
					uni.setStorageSync('kefuUrl',this.goodDetail.shop.url)
					uni.navigateTo({
						url: '/subpkg/kefu/kefu?from=0'
					})
				}else {
					uni.showModal({
					    title: '提示',
					    content:'客服联系电话:' +this.goodDetail.shop.mobile,
						confirmText:'拨打',
					    success: function (res) {
					        if (res.confirm) {
								that.$tool.phone(that.goodDetail.shop.mobile)
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
				}
			},
			//点击轮播图预览
			btnImg(e) {
				console.log(e)
				uni.previewImage({
					current:e,
					urls:this.swiperList.map(item=>item.image)
				})
			},
			//返回上一页
			gotoback() {
				uni.navigateBack({
				})
			},
		}
	}
</script>

<style lang="scss">
	.header-bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	.topbg {
		background: #D23030;
	}
	.swiper {
		position: relative;

		.backIcon {
			position: absolute;
			top: 30rpx;
			left: 30rpx;
		}
	}

	.goodsintroduce {
		background-color: #FFFFFF;
		padding: 30rpx;
	}

	.typebox {
		width: 75%;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #F6F6F6;
	}

	.goshop {
		font-size: 24rpx;
		text-align: center;
		line-height: 44rpx;
		border: 2rpx solid #D23030;
	}
	.footerbuy {
		position: fixed;
		width: 100%;
		bottom: 0;
		background-color: #FFFFFF;
		padding-bottom: 30rpx;

		.cartbox,
		.buyBtnBox {
			background-color: #E58231;
			font-size: 26rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 70rpx;
			border-radius: 70rpx 0 0 70rpx;
		}

		.buyBtnBox {
			background-color: #D23030;
			border-radius: 0 70rpx 70rpx 0;
		}
	}

	.popupTypebox {
		width: 160rpx;
		height: 50rpx;
		background: #F6F6F6;
		border-radius: 25rpx;
		// border: 2rpx solid #D23030;
		font-size: 22rpx;
		color: #333333;
		text-align: center;
		line-height: 50rpx;
	}

	.selepopupTypebox {
		width: 160rpx;
		height: 50rpx;
		background: rgba(253, 115, 115, 0.1);
		border-radius: 25rpx;
		border: 2rpx solid #D23030;
		font-size: 22rpx;
		color: #D23030;
		text-align: center;
		line-height: 50rpx;
	}
</style>
